import { useState, useEffect, useRef } from "react";
export function useTop(distance = 200) {
  // 创建一个dom节点
  var elem = useRef();
  // 定义当前滚动的距离
  const [top, setTop] = useState(0);
  // 回到顶点的事件
  function goTop() {
    // 滚动事件
    window.scrollTo({
      // 方向
      top: 0,
      // 速度-平滑
      behavior: "smooth"
    });
  }
  // 隐藏显示事件
  function onScroll() {
    // 获取滚动条 滚动距离
    var scrollTo = document.documentElement.scrollTop;
    // 当滚动条滚动的距离小于设定的距离时，回顶按钮隐藏
    if (scrollTo < distance) {
      elem.current.style.display = "none";
    } else {
      // 当滚动条滚动的距离大于设定的距离时，回顶按钮显示
      elem.current.style.display = "block";
    }
  }

  useEffect(() => {
    //elem.current  :  获取该DOM节点(标签)
    // 给ref元素 添加回顶事件
    elem.current.addEventListener("click", goTop);
    // 默认检查 滚动条
    onScroll();
    // 添加监听滚动条事件
    window.addEventListener("scroll", onScroll);

    return () => {
      window.removeEventListener("scroll", onScroll);
      elem.current.removeEventListener("click", goTop);
    };
  }, []);
  /*
 返回值
  elem: dom节点
  top:  当前滚动的距离
*/
  return [elem, top];
}
